<template>
  <div class="list" ref="wrapper">
   <div>
   <div class="area">
     <div class="title border-topbottom" >当前城市</div>
     <div class="button-list">
       <div class="button-wrapper">
        <div class="button">{{this.currentCity}}</div> 
        </div>
     </div>
   </div>
    <div class="area">
     <div class="title border-topbottom" >热门城市</div>
        <div class="button-list">
          <div class="button-wrapper" @click="handleClick(item.name)" v-for="item of hot" :key="item.id">
            <div class="button">{{item.name}}</div>
          </div>
        </div>
   </div>
    <div class="area"
     v-for="(item,key) of cities" 
    :key="key"
    :ref="key"
    >
     <div class="title border-topbottom" >{{key}}</div>
        <div class="item-list">
          <div class="item border-bottom" @click="handleClick(innerItem.name)" v-for="innerItem in item" :key="innerItem.id">{{innerItem.name}}</div>  
        </div>
      </div>
  </div>
  </div>
</template>

<script>
import Bscroll from "better-scroll"
import {mapState,mapMutations} from "vuex"
export default {
 name:"CityList",
 props:{
   hot:Array,
   cities:Object,
   leter:String
 },
 computed:{
   ...mapState({
     currentCity:"city"
   })
 },
 methods:{
   handleClick(city){
      this.$store.commit("changeCity",city);
      this.$router.push("/");
   },
   ...mapMutations(["changeCity"])
 },
 watch:{
  leter (){
    if(this.leter){
       const element=this.$refs[this.leter][0]
       this.scroll.scrollToElement(element);
    }
   }
 },
 mounted(){
   this.scroll=new Bscroll(this.$refs.wrapper);
 }
 
}
</script>
<style lang="stylus" scoped>
 @import "~styles/varibles.styl"
 .border-topbottom
  &:before
    border-color:#ccc
  &:after
    border-color:#ccc
 .border-bottom
  &:before
    border-color:#ccc
.list
 position:absolute
 top:1.68rem
 left:0
 right:0
 bottom:0
 overflow hidden  
 .title
  line-height:.54rem
  height:.54rem
  background:#eee
  padding-left:.2rem
 .button-list
  padding 0.1rem .6rem .1rem .1rem
  overflow:hidden
  .button-wrapper
    float:left
    width:33.33%
    .button
     margin:.1rem
     text-align:center
     padding:.1rem 0
     border:.02rem solid #ccc
     border-radius 0.06rem
 .item-list
   .item
     line-height:.76rem
     color:#666
     padding-left:.2rem
</style>